<template>
    <div class="courseManage courseContentManage">
      <audio ref="Frequency" controls="" style="display: none;"></audio>
      <MaskItem :imgPercentage="mediaPercentage"></MaskItem>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> {{gratisTitle}} </el-breadcrumb-item>
          </el-breadcrumb>
      </div>

      <div class="container">
        <div class="handle-box">
          <el-button type="primary" @click.stop.prevent="appendExperienceClassModule()">新增模块</el-button>
        </div>
        <div class="stageList">
          <el-table :data="gratisContent"   ref="multipleTable">
            <el-table-column label="模块序号" width="100" align="center">
              <template slot-scope="scope" >
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column label="模块标题" align="center">
              <template slot-scope="scope" >
                {{scope.row.module_title}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                  <!-- <el-button size="small" type="info" plain @click.stop.prevent="operateSkipInterface(scope.row, scope.$index, 3)">小讲堂</el-button> -->
                  <el-button size="small" type="primary" @click.stop.prevent="compileExperienceClassModule(scope.row)">查看编辑</el-button>
                  <el-button size="small" type="danger" @click.stop.prevent="deleteExperienceClassModule(scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>


      <!-- 编辑弹出框 -->
      <el-dialog :title="editDialogTitle" :visible.sync="editVisible" width="60%" :close-on-click-modal="false">
        <!-- 课程内容编辑子窗体  -->
        <el-dialog :title="editSubDialogTitle" :visible.sync="editSubVisible"  width="50%" :modal-append-to-body="false" :close-on-click-modal="false" @before-close="editSubVisible=false">
          <!-- 课程 内容   0 - 文本   1 - 图片   2 - 音频   3 - 视屏  4 - 作业  5 - 游戏 -->
          <div class="subDialogCell" v-if="moduleGenreStatus === 1">
            <div class="showBox">
              <draggable v-model="moduleMember.moduleMemberImageList" :options="dragOptions">
                <transition-group tag="div" id="done" class="item-ul">
                  <div class="showImage" v-for="(item, index) in moduleMember.moduleMemberImageList" :key="'moduleMemberImage'+index">
                    <img :src="item" width="100%" height="100%">
                    <div class="cellButton" @click.stop.prevent="deleteModuleMemberImage(moduleMember.moduleMemberImageList, index)">
                      <el-button type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
            <div class="uploadBox">
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellImageText">
                    <em>
                      点击上传图片
                      <input class="uploadBtn" type="file" name="image" multiple ref="imageModule" accept="image/*" @change="obtainLocalMultimediaFiles($event, 1)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="moduleGenreStatus === 2">
            <div class="uploadBox">
                <div class="uplaodAudio" v-if="moduleMember.moduleMemberAudioLink" style="margin-bottom: 10px;">
                  <aplayer autoplay
                    :music="{
                      title: moduleMember.moduleMemberAudioTitle,
                      artist: '乐曲',
                      src: moduleMember.moduleMemberAudioLink,
                      pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                  }"/>
                </div>
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellAudioText">
                    <em>
                      点击上传音频
                      <input class="uploadBtn" type="file" name="audio" ref="audioModule" accept="audio/*" @change="obtainLocalMultimediaFiles($event, 2)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="moduleGenreStatus === 3">
            <div class="uploadBox">
                <div class="uoloadVideo" v-if="moduleMember.moduleMemberVideoLink"  style="margin-bottom: 10px;">
                  <video :src="moduleMember.moduleMemberVideoLink" width="100%" height="100%" controls></video>
                </div>
                <div class="uploadCell">
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellVideoText">
                    <em>
                      点击上传视屏
                      <input class="uploadBtn" type="file" name="video" ref="videoModule" accept="video/*" @change="obtainLocalMultimediaFiles($event, 3)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>
          <div class="subDialogCell" v-if="moduleGenreStatus === 33">
            <div class="uploadBox">
                <div class="uploadCell">
                  <div class="uplaodImage">
                    <img :src="moduleMember.moduleMemberVideoCover" width="100%">
                  </div>
                  <i class="el-icon-upload cellIcon"></i>
                  <div class="el-upload__text cellText cellImageText">
                    <em>
                      点击上传封面
                      <input class="uploadBtn" type="file" name="image" ref="imageCover" accept="image/*" @change="obtainLocalMultimediaFiles($event, 33)"/>
                    </em>
                  </div>
                </div>
              </div>
          </div>

          <span slot="footer" class="dialog-footer">
              <el-button @click="editSubVisible = false">取 消</el-button>
              <el-button type="primary" @click.stop.prevent="defineStorageMultimedia">确定</el-button>
          </span>
        </el-dialog>

        <!-- 新增/编辑 免费体验课模块 -->
        <div class="editSection" v-if="gratisOperateStatus === 1 || gratisOperateStatus === 2 || gratisOperateStatus === 4">
          <el-form ref="gratisModuleFrom" :model="gratisModuleFrom" :rules="gratisModuleRules" label-width="25%">
            <div class="sectionLine">
              <el-form-item label="模块标题" prop="moduleTitle">
                  <el-input v-model="gratisModuleFrom.moduleTitle"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="模块描述" prop="moduleDepict">
                  <el-input type="textarea" :rows="3" v-model="gratisModuleFrom.moduleDepict"></el-input>
              </el-form-item>
            </div>
            <div class="sectionLine">
              <el-form-item label="模块备注" prop="moduleRemark">
                  <el-input type="textarea" :rows="3" v-model="gratisModuleFrom.moduleRemark"></el-input>
              </el-form-item>
            </div>
            

            <draggable v-model="gratisModuleFrom.moduleContent" :options="dragOptions">
              <transition-group tag="div" id="done" class="item-ul">
                <el-form-item v-for="(item, index) in gratisModuleFrom.moduleContent" :key="'#'+index">
                  <div class="setionImage setionCell" v-if="item.moduleMemberStatus === 1">
                    <div class="taskImageList">
                      <div class="taskImageCell" v-for="(itemImage, indexImage) in item.moduleMemberImageList" :key="'image_'+indexImage" :style="{backgroundImage:`url(${itemImage})`}"></div>
                    </div>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileModuleContentMember(item, 1)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteModuleContentMember(index)"></el-button>
                    </div>
                  </div>
                  <div class="setionAudio setionCell" v-if="item.moduleMemberStatus === 2">
                    <aplayer autoplay
                      :music="{
                        title: item.moduleMemberAudioTitle,
                        artist: '乐曲',
                        src: item.moduleMemberAudioLink,
                        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
                    }"/>
                    <div class="cellBtn">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileModuleContentMember(item, 2)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteModuleContentMember(index)"></el-button>
                    </div>
                  </div>

                  <div class="setionVideo setionCell" v-if="item.moduleMemberStatus === 3">
                    <p style="margin-bottom: 20px;">{{item.name}}</p>
                    <video :src="item.moduleMemberVideoLink" width="100%" height="100%" controls></video>
                    <div class="cellBtn">
                      <el-button type="warning" icon="el-icon-upload2" circle @click.stop.prevent="uploadVideoCover(item)"></el-button>
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop.prevent="compileModuleContentMember(item, 3)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop.prevent="deleteModuleContentMember(index)"></el-button>
                    </div>
                  </div>
                </el-form-item>
              </transition-group>
            </draggable>
          </el-form>

          <div class="setionButton">
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(0)">
              <el-button type="primary">文字</el-button>
            </div> -->
            <div class="setionBtn" @click.stop.prevent="appendModuleContentMember(1)">
              <el-button type="primary">图片</el-button>
            </div>
            <div class="setionBtn" @click.stop.prevent="appendModuleContentMember(2)">
              <el-button type="info">音频</el-button>
            </div>
            <div class="setionBtn" @click.stop.prevent="appendModuleContentMember(3)">
              <el-button type="warning">视频</el-button>
            </div>
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(4)">
              <el-button type="success">作业</el-button>
            </div> -->
            <!-- <div class="setionBtn" @click.stop.prevent="appendCourseContent(5)">
              <el-button type="danger">游戏</el-button>
            </div> -->
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="issueExperienceClassModule('gratisModuleFrom')">保存发布</el-button>
        </span>
      </el-dialog>


      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt" v-if="gratisOperateStatus == 3">
          删除不可恢复，请输入登录密码确定删除
          <!-- <el-input ></el-input> -->
          <el-form ref="gratisModuleFrom" :model="gratisModuleFrom" :rules="gratisModuleRules">
            <el-form-item label="" prop="userPassword">
              <el-input v-model="gratisModuleFrom.userPassword" placeholder="请输入用户密码"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="del-dialog-cnt" v-else>
          确定删除？？？
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="issueExperienceClassModule('gratisModuleFrom')">确 定</el-button>
        </span>
      </el-dialog>
      
    </div>
</template>

<script type="text/ecmascript-6">
    import { baiduCloud } from '@/config/env';
    import { upLoadFileToOSS } from '@/config/utils'
    // import {
    //   obtainCourseCatalogList,
    //   appendCourseStage,
    //   compileCourseStage,
    //   appendCourseSection,
    //   compileCourseSection,
    //   deleteCourseSection,
    //   obtainGameScreeningList
    // } from '@/config/api'
    import { obtainExperienceClassData, accretionModuleMembers, compileModuleMembers, removeModuleMembers } from '@/config/api'
    import Vue from 'vue'
    // 音频插件
    import Aplayer from 'vue-aplayer'
    // 拖拽
    import draggable from 'vuedraggable'
    // 加载动画
    import Mask from '@/components/common/mask.vue'

    export default {
        name: 'CourseContentManage',
        components: {
            Aplayer,
            draggable,
            MaskItem: Mask  
        },
        data () {
            return {
                //
                akBos: baiduCloud.akBos,
                skBos: baiduCloud.skBos,
                endpointBos: baiduCloud.endpointBos,
                // 1 --- 课程模块图片
                bucketModuleImageBos: baiduCloud.bucketBos +'/course/module/image',
                urlModuleImageBos: baiduCloud.urlBos+'/course/module/image/',

                // 2 --- 课程模块音频
                bucketModuleAudioBos: baiduCloud.bucketBos +'/course/module/audio',
                urlModuleAudioBos: baiduCloud.urlBos+'/course/module/audio/',

                // 3 --- 课程模块视屏
                bucketModuleVideoBos: baiduCloud.bucketBos +'/course/module/video',
                urlModuleVideoBos: baiduCloud.urlBos+'/course/module/video/',

                // 多媒体 上传进度
                mediaPercentage: 0,

                // 拖拽配置
                dragOptions:{
                    animation: 120,
                    scroll: true,
                    group: 'sortlist',
                    ghostClass: 'ghost-style'
                },

                // 编辑弹窗标题
                editDialogTitle: '',
                // 显示编辑弹窗
                editVisible: false,
                // 显示删除弹窗
                delVisible: false,
                // 显示编辑子弹窗
                editSubVisible: false,
                // 编辑子弹窗标题
                editSubDialogTitle: '',

                // 体验课 id
                gratisId: '',
                // 体验课 标题
                gratisTitle: '',
                // 体验课 内容
                gratisContent: [],
                // 体验课模块表单
                gratisModuleFrom: {
                moduleId: '',
                moduleTitle: '',
                moduleDepict: '',
                moduleRemark: '',
                moduleRank: '',
                moduleContent: [],
                userPassword: '',
                },
                gratisModuleRules: {
                moduleTitle: [
                    { required: true, message: '请填写模块标题', trigger: 'blur' },
                ],
                moduleDepict: [
                    { required: true, message: '请填写模块描述', trigger: 'blur' },
                ],
                userPassword: [
                    { required: true, message: '请填写登录密码', trigger: 'blur' },
                ],
                },
                // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                gratisOperateStatus: 0,
                // 模块成员操作状态 1---新增模块成员 2---编辑模块成员
                moduleOperateStatus: 0,
                // 模块成员类型状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
                moduleGenreStatus: 0,
                // 模块成员
                moduleMember: {},
                // 模块成员下标
                moduleMemberIndex: null,
                // 多媒体文件类型状态  1 --- 图片   2 --- 音频   3 --- 视频   33 --- 视频封面
                multimediaGenreStatus: 0,
            }
        },
        watch: {
            // 深度监听
            $route: {
                handler(item){
                    let self = this;
                    if(JSON.stringify(item.query) != '[]') {
                        // 体验课 id
                        self.gratisId = self.$route.query.gratisId;
                        // 获取免费体验课详情数据
                        self.obtainExperienceClassDatum();
                    }
                },
                deep:true
            },
        },

        mounted (){
            let self = this;
            // // 初始化百度云上传
            // self.initBaiDuBce();
            if(JSON.stringify(self.$route.query) != '[]') {
                // 体验课 id
                self.gratisId = self.$route.query.gratisId;
                // 获取免费体验课详情数据
                self.obtainExperienceClassDatum();
            }
        },
        methods: {
            // // 初始化百度云上传
            // initBaiDuBce(){
            //     let self = this;
            //     let bosConfig = {
            //     credentials: {
            //         ak: self.akBos,
            //         sk: self.skBos
            //     },
            //     endpoint: self.endpointBos  // 根据您选用bos服务的区域配置相应的endpoint
            //     };
            //     // let bucket = self.bucketBos; // 设置您想要操作的bucket
            //     self.client = new baidubce.sdk.BosClient(bosConfig);
            // },

            // 获取免费体验课详情数据
            async obtainExperienceClassDatum() {
                let self = this;
                let experienceClassInfo = await obtainExperienceClassData(self.gratisId);
                if (experienceClassInfo.status === 200) {
                // 体验课 标题
                self.gratisTitle = experienceClassInfo.data.gratis_name
                // 体验课 内容
                self.gratisContent = experienceClassInfo.data.gratis_content || []
                }
                console.log(experienceClassInfo, '...experienceClassInfo')
            },
            // 初始化免费体验课模块
            initExperienceClassModule() {
                let self = this;
                // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                self.gratisOperateStatus = 0;
                // 体验课模块表单
                self.gratisModuleFrom.moduleId = '';
                self.gratisModuleFrom.moduleTitle = '';
                self.gratisModuleFrom.moduleDepict = '';
                self.gratisModuleFrom.moduleRemark = '';
                self.gratisModuleFrom.moduleRank = '';
                self.gratisModuleFrom.moduleContent = [];
                self.gratisModuleFrom.userPassword = '';

                // 模块成员类型状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
                self.moduleGenreStatus = 0
            },
            // // 操作初始化
            // operateInit(){
            //   let self = this;
            //   // 课程操作对象
            //   self.courseOperateObject = {};
            //   // 课程操作状态  0---新增阶段 1---新增小节 2---编辑阶段 3---编辑小节 4---删除阶段 5---删除小节
            //   self.courseOperateStatus = 0;
            //   // 新增阶段
            //   self.courseStageImg = '';
            //   // 课程阶段下标
            //   self.courseStageIndex = null;
            //   // // 课程封面图片
            //   // self.courseCoverImg = '';
            //   // 课程内容表单
            //   self.courseSectionFrom.sectionName = '';
            //   self.courseSectionFrom.sectionNumber = null;
            //   self.courseSectionFrom.sectionDay = null;
            //   self.courseSectionFrom.sectionJob = '0';
            //   self.courseSectionFrom.userPassword = '';
            //   self.courseSectionFrom.sectionCover = '';

            //   // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
            //   self.courseContentStatus = 0;
            //   // 课程内容对象
            //   self.courseContentObject = [];
            //   // 课程内容下标
            //   self.courseContentIndex = null;
            // },
            // 添加免费体验课模块数据
            async appendExperienceClassModule() {
                let self = this;
                // 初始化免费体验课模块
                self.initExperienceClassModule();
            // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                self.gratisOperateStatus = 1;
                // 编辑弹窗标题
                self.editDialogTitle = '新增体验课模块';
                // 显示编辑弹窗
                self.editVisible = true;
            },

            // 编辑免费体验课模块数据
            async compileExperienceClassModule(item) {
                console.log(item, '编辑免费体验课模块数据')
                let self = this;
                // 初始化免费体验课模块
                self.initExperienceClassModule();
                // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                self.gratisOperateStatus = 2;
                // 体验课模块表单
                self.gratisModuleFrom.moduleId = item.module_id;
                self.gratisModuleFrom.moduleTitle = item.module_title;
                self.gratisModuleFrom.moduleDepict = item.module_depict;
                self.gratisModuleFrom.moduleRemark = item.module_remark;
                self.gratisModuleFrom.moduleRank = item.module_rank;
                self.gratisModuleFrom.moduleContent = item.module_content? JSON.parse(item.module_content): []

                // 编辑弹窗标题
                self.editDialogTitle = '编辑体验课模块';
                // 显示编辑弹窗
                self.editVisible = true;
            },
    
            // 删除免费体验课模块数据
            async deleteExperienceClassModule(item) {
                let self = this;
                // 初始化免费体验课模块
                self.initExperienceClassModule();
                // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                self.gratisOperateStatus = 3;
                // 体验课模块表单
                self.gratisModuleFrom.moduleId = item.module_id;
                self.gratisModuleFrom.moduleTitle = item.module_title;
                self.gratisModuleFrom.moduleDepict = item.module_depict;
                self.gratisModuleFrom.moduleRemark = item.module_remark;
                self.gratisModuleFrom.moduleRank = item.module_rank;
                self.gratisModuleFrom.moduleContent = item.module_content? JSON.parse(item.module_content): []
                // 显示删除弹窗
                self.delVisible = true;
            },

            // 添加模块内容成员数据
            appendModuleContentMember(status) {
                let self = this;
                // 模块成员操作状态 1---新增模块成员 2---编辑模块成员
                self.moduleOperateStatus = 1;
                // 模块成员类型状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视频  33 --- 视频封面  4 --- 作业   5 --- 游戏
                self.moduleGenreStatus = status;
                // 模块成员
                self.moduleMember = {
                moduleMemberStatus: self.moduleGenreStatus,
                moduleMemberVideoLink: '',
                moduleMemberVideoCover: '',
                moduleMemberAudioLink: '',
                moduleMemberAudioTitle: '',
                moduleMemberImageList: []
                }
                if (self.moduleGenreStatus === 1) {
                // 编辑子弹窗标题
                self.editSubDialogTitle = '新增课程图片'
                }
                if(self.moduleGenreStatus === 2){
                // 编辑子弹窗标题
                self.editSubDialogTitle = '新增课程音频'
                }
                if(self.moduleGenreStatus === 3){
                // 编辑子弹窗标题
                self.editSubDialogTitle = '新增课程视屏'
                }
                // if (self.moduleGenreStatus === 33){
                //   // 编辑子弹窗标题
                //   self.editSubDialogTitle = '新增视屏封面'
                // }
                // 显示编辑子弹窗
                self.editSubVisible = true;
            },

            // 编辑模块内容成员数据
            compileModuleContentMember(item, status) {
                let self = this;
                // 模块成员操作状态 1---新增模块成员 2---编辑模块成员
                self.moduleOperateStatus = 2;
                // 模块成员类型状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
                self.moduleGenreStatus = status;
                // 模块成员
                self.moduleMember = item;
                if(self.moduleGenreStatus === 1){
                    // 编辑子弹窗标题
                    self.editSubDialogTitle = '编辑课程图片'
                }
                if(self.moduleGenreStatus === 2){
                    // 编辑子弹窗标题
                    self.editSubDialogTitle = '编辑课程音频'
                }
                if(self.moduleGenreStatus === 3){
                    // 编辑子弹窗标题
                    self.editSubDialogTitle = '编辑课程视屏'
                }
                // 显示编辑子弹窗
                self.editSubVisible = true;
            },

            // 删除模块内容成员数据
            deleteModuleContentMember(index) {
                let self = this;
                // 模块成员下标
                self.moduleMemberIndex = index;
                self.gratisModuleFrom.moduleContent.splice(self.moduleMemberIndex , 1);
            },

            // 发布免费体验课模块
            async issueExperienceClassModule(formName) {
                let self = this;
                self.$refs[formName].validate(async(valid) => {
                if (valid) {
                    // 体验课操作状态   1---新增体验课模块 2---编辑体验课模块 3---删除体验课模块 4---删除模块成员
                    if (self.gratisOperateStatus === 1) {
                    const accretionInfo = await accretionModuleMembers(self.gratisId, self.gratisModuleFrom.moduleTitle, self.gratisModuleFrom.moduleDepict, self.gratisModuleFrom.moduleRemark, self.gratisModuleFrom.moduleRank, JSON.stringify(self.gratisModuleFrom.moduleContent))
                    console.log(accretionInfo, '发布免费体验课模块 --- 新增')
                    if(accretionInfo.status === 200){
                        // 显示编辑弹窗
                        self.editVisible = false
                        // 获取免费体验课详情数据
                        self.obtainExperienceClassDatum()
                    }else{
                        self.$notify.error({
                        title: '错误',
                        message: accretionInfo.msg
                        });
                    }
                    }
                    if (self.gratisOperateStatus === 2) {
                    // console.log(self.gratisId, self.gratisModuleFrom, '发布免费体验课模块 --- 编辑')
                    const compileInfo = await compileModuleMembers(self.gratisModuleFrom.moduleId, self.gratisId, self.gratisModuleFrom.moduleTitle, self.gratisModuleFrom.moduleDepict, self.gratisModuleFrom.moduleRemark, self.gratisModuleFrom.moduleRank, JSON.stringify(self.gratisModuleFrom.moduleContent))
                    console.log(compileInfo, '发布免费体验课模块 --- 编辑')
                    if(compileInfo.status === 200){
                        // 显示编辑弹窗
                        self.editVisible = false
                        // 获取免费体验课详情数据
                        self.obtainExperienceClassDatum()
                    }else{
                        self.$notify.error({
                        title: '错误',
                        message: compileInfo.msg
                        });
                    }
                    }
                    if (self.gratisOperateStatus === 3) {
                    // console.log(self.gratisId, self.gratisModuleFrom, '发布免费体验课模块 --- 删除')
                    const deleteInfo = await removeModuleMembers(self.gratisId, self.gratisModuleFrom.moduleId, self.gratisModuleFrom.userPassword)
                    // console.log(deleteInfo, '发布免费体验课模块 --- 删除')
                    if(deleteInfo.status === 200){
                        // 显示删除弹窗
                        self.delVisible = false
                        // 获取免费体验课详情数据
                        self.obtainExperienceClassDatum()
                    }else{
                        self.$notify.error({
                        title: '错误',
                        message: deleteInfo.msg
                        });
                    }
                    }
                }
                })
            },
            
            // 获取本地多媒体文件
            async obtainLocalMultimediaFiles(event, status) {
                let self = this;
                console.log('获取本地多媒体文件', event, status)
                // 多媒体文件类型状态  1 --- 图片   2 --- 音频   3 --- 视频   33 --- 视频封面
                self.multimediaGenreStatus = status;
                // // 浏览器兼容 (FF不兼容event.srcElement)
                // let evt = event.srcElement ? event.srcElement : event.target;
                // let file = evt.files; // 获取要上传的文件
                // for (let i = 0; i < file.length; i++) {
                //     // 上传多媒体文件
                //     self.UploadMultimediaFiles(file[i])
                // }

                // 浏览器兼容 (FF不兼容event.srcElement)
                let evt = event.srcElement ? event.srcElement : event.target;
                // 获取要上传的文件
                let file = evt.files;
                // 阿里oss上传路径
                let ossPath = '';
                if(self.multimediaGenreStatus === 1 || self.multimediaGenreStatus === 33){
                    ossPath = 'wx_bs/module/image'
                }
                if(self.multimediaGenreStatus === 2){
                    ossPath = 'wx_bs/module/audio'
                }
                if(self.multimediaGenreStatus === 3){
                    ossPath = 'wx_bs/module/video'
                }
                if (ossPath) {
                    const loading = self.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    for (let i = 0; i < file.length; i++) {
                        // 用户取消上传
                        if(file[i] == undefined){
                            return;
                        }
                        // 上传多媒体
                        const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                        console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                        if(self.multimediaGenreStatus === 1){
                            // 模块成员 -- 图片列表
                            self.moduleMember.moduleMemberImageList.push(mainBannerUrl)
                        }
                        if(self.multimediaGenreStatus === 2){
                            // 模块成员 -- 音频链接
                            self.moduleMember.moduleMemberAudioLink = mainBannerUrl
                            // 模块成员 -- 音频标题
                            self.moduleMember.moduleMemberAudioTitle = file[i].name.split(/\./g).shift();
                        }
                        if(self.multimediaGenreStatus === 3){
                            // 模块成员 -- 视频链接
                            self.moduleMember.moduleMemberVideoLink = mainBannerUrl
                        }
                        if(self.multimediaGenreStatus === 33){
                            // 模块成员 -- 视频封面
                            self.moduleMember.moduleMemberVideoCover =mainBannerUrl
                        }
                        if (i === file.length - 1) {
                            if (self.multimediaGenreStatus === 1) {
                               self.$refs.imageModule.value = ''
                            }
                            if (self.multimediaGenreStatus === 2) {
                                self.$refs.audioModule.value = ''
                            }
                            if (self.multimediaGenreStatus === 3) {
                                self.$refs.videoModule.value = ''
                            }
                            if (self.multimediaGenreStatus === 33) {
                                self.$refs.imageCover.value = ''
                            }
                            loading.close()
                        }
                    }
                }
            },

        // 上传多媒体文件
        UploadMultimediaFiles(file) {
            let self= this;
            // 用户取消上传
            if(file == undefined){
            return;
            }
            // 生成6位随机数
            let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
            let res = "";
            for(let i = 0; i < 6 ; i ++) {
            let id = Math.ceil(Math.random()*61);
            res += chars[id];
            }
            let key = res + '.' +file.name.split(/\./g).pop(); // 保存到bos时的key，您可更改，默认以文件名作为key
            let blob = file;
            let ext = key.split(/\./g).pop();
            let mimeType = baidubce.sdk.MimeType.guess(ext);
            if (/^text\//.test(mimeType)) {
            mimeType += '; charset=UTF-8';
            }
            let options = {
            'Content-Type': mimeType
            };
            // 多媒体文件类型状态  1 --- 图片   2 --- 音频   3 --- 视频   33 --- 视频封面
            let bucketBos = '';
            let urlBos = '';
            if (self.multimediaGenreStatus == 1 || self.multimediaGenreStatus == 33) {
            bucketBos = self.bucketModuleImageBos;
            urlBos = self.urlModuleImageBos;
            }
            if (self.multimediaGenreStatus == 2) {
            bucketBos = self.bucketModuleAudioBos;
            urlBos = self.urlModuleAudioBos;
            }
            if (self.multimediaGenreStatus == 3) {
            bucketBos = self.bucketModuleVideoBos;
            urlBos = self.urlModuleVideoBos;
            }
            self.client.putObjectFromBlob(bucketBos, key, blob, options)
            .then(async (res) => {
                // 上传完成，添加您的代码
                console.log(key, self.multimediaGenreStatus, '上传成功');
                // 多媒体文件类型状态  1 --- 图片   2 --- 音频   3 --- 视频   33 --- 视频封面
                // 清空input file的值 （避免  点file控件选中同一个文件后发现图片并没有被重新创建）
                if (self.multimediaGenreStatus === 1) {
                self.$refs.imageModule.value = ''
                // 模块成员 -- 图片列表
                self.moduleMember.moduleMemberImageList.push(urlBos + key)
                }
                if (self.multimediaGenreStatus === 2) {
                self.$refs.audioModule.value = ''
                // 模块成员 -- 音频链接
                self.moduleMember.moduleMemberAudioLink = urlBos + key
                // 模块成员 -- 音频标题
                self.moduleMember.moduleMemberAudioTitle = file.name.split(/\./g).shift();

                }
                if (self.multimediaGenreStatus === 3) {
                self.$refs.videoModule.value = ''
                // 模块成员 -- 视频链接
                self.moduleMember.moduleMemberVideoLink = urlBos + key
                }
                if (self.multimediaGenreStatus === 33) {
                console.log('...')
                self.$refs.imageCover.value = ''
                // 模块成员 -- 视频封面
                self.moduleMember.moduleMemberVideoCover = urlBos + key
                
                }
                console.log(self.moduleMember, '...............模块成员')
            })
            .catch(function (err) {
                // 上传失败，添加您的代码
                console.log(err);
            });
            self.client.on('progress', function (evt){
                // console.log(evt, ".....")
                // 监听上传进度
                if (evt.lengthComputable){
                    self.mediaPercentage = parseInt((evt.loaded / evt.total) * 100)+'';
                    console.log(self.mediaPercentage, "上传")
                    self.mediaPercentage = String(self.mediaPercentage)
                    // 满了，清空进度条
                    if(self.mediaPercentage == 100){
                        self.mediaPercentage = 0
                    }
                }
            });

        },

        // 检测 是否有上传多媒体
        monitorMultimedia() {
            let self = this;
            // 多媒体文件类型状态  1 --- 图片   2 --- 音频   3 --- 视频   33 --- 视频封面
            if (self.multimediaGenreStatus === 1) {
            if (JSON.stringify(self.moduleMember.moduleMemberImageList) === '[]') {
                self.$notify.error({
                title: '错误',
                message: '请上传课程图片'
                });
                return false;
            }
            }
            if (self.multimediaGenreStatus === 2) {
            if (!self.moduleMember.moduleMemberAudioLink) {
                self.$notify.error({
                title: '错误',
                message: '请上传课程音频'
                });
                return false;
            }
            }
            if (self.multimediaGenreStatus === 3) {
            if (!self.moduleMember.moduleMemberVideoLink) {
                self.$notify.error({
                title: '错误',
                message: '请上传课程视频'
                });
                return false;
            }
            }
            return true;
        },

        // 确定 存储上传的多媒体
        defineStorageMultimedia() {
            let self = this;
            // 检测 多媒体
            if(self.monitorMultimedia()){
            // 模块成员操作状态 1---新增模块成员 2---编辑模块成员
            if (self.moduleOperateStatus === 1) {
                self.gratisModuleFrom.moduleContent.push(self.moduleMember)
            }
            console.log(self.gratisModuleFrom.moduleContent, '确定 存储上传的多媒体')
            // 显示编辑子弹窗
            self.editSubVisible = false;
            }
        },
        // // 确定编辑 多媒体
        // operateMedia(){
        //   let self = this;
        //   // 课程内容状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视屏   4 --- 作业   5 --- 游戏
        //   // courseContentStatus: 0,
        //   // // 课程内容对象
        //   // courseContentObject: [],

        //   // 检测 多媒体
        //   if(self.monitorMedia()){
        //     // // 存储欲编辑课程内容模块
        //     // courseContentModules: {},
        //     // 操作编辑课程内容模块状态  0 -- 新增  1 -- 编辑
        //     // courseContentModulesStatus: 0,

        //     if (self.courseContentStatus === 0 || self.courseContentStatus === 4) {
        //       // let contentText = self.courseContentModules.content.split('\n')
        //       // self.courseContentModules.content = []
        //       // self.courseContentModules.content = contentText

        //       self.courseContentModules.cache = self.courseContentModules.content.split('\n')

        //       console.log(self.courseContentModules, '........courseContentModules')
        //     }

        //     if(self.courseContentModulesStatus === 0){
        //       // 课程内容对象
        //       self.courseContentObject.push(self.courseContentModules)
        //     }
        //     if(self.courseContentModulesStatus === 1){
        //       if (self.courseContentStatus === 5) {
        //         console.log(self.courseContentModules, '........courseContentModules')
        //         console.log(self.checkedLevel, '........checkedLevel')
        //         if (JSON.stringify(self.checkedLevel) !== '[]') {
        //           self.courseContentModules.cache = self.checkedLevel
        //           // self.courseContentModules.content = self.checkedLevel
        //           // 储存 选中的关卡id
        //           const levelId = []
        //           // 储存 选中的关卡
        //           self.checkedLevel.some((itemLevel, indexLevel) => {
        //             levelId.push(itemLevel.stripId)
        //           })
        //           self.courseContentModules.content = levelId.join()
        //         }
        //       }
        //     }

        //     // 显示编辑子弹窗
        //     self.editSubVisible = false;
        //   }
        // },
        // 删除 模块成员图片
        deleteModuleMemberImage(item, index) {
            let self = this;
            item.splice(index, 1);
        },
        // 上传视屏封面
        uploadVideoCover(item) {
            let self = this;
            console.log(item, '...上传视屏封面')
            // 模块成员
            self.moduleMember = item;
            // 模块成员类型状态 0 --- 文本   1 --- 图片   2 --- 音频   3 --- 视频  33 --- 视频封面  4 --- 作业   5 --- 游戏
            self.moduleGenreStatus = 33;
            // 模块成员操作状态 1---新增模块成员 2---编辑模块成员
            self.moduleOperateStatus = 2;
            // 编辑子弹窗标题
            self.editSubDialogTitle = '新增视屏封面'
            // 显示编辑子弹窗
            self.editSubVisible = true;
        }

        },
  }
</script>

<style>
  .courseContentManage .v-modal{
      display: none;
  }
</style>
<style scoped>
  .handle-box {
    margin-bottom: 20px;
    width: 100%;
    text-align: right;
  }
  .del-dialog-cnt{
    font-size: 16px;
    text-align: center
  }

  .pre-img{
    width: 300px;
    height: auto;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
  }
  .crop-demo{
    display: flex;
    align-items: flex-end;
  }
  .crop-demo-btn{
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .crop-input{
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
</style>
<style lang="less" scoped>
  @import 'WorkshopContentManage.less';
</style>
